import { h, defineComponent, ref, computed, watch } from 'vue'
import SVGInjectInstance from '@iconfu/svg-inject'
import mxLoadFail from '../../assets/icons/mx-load-fail.svg'
const mxModule = import.meta.glob('../../assets/icons/**/**.svg')
const module = import.meta.glob('../../../src/assets/icons/**/**.svg')
const iconPath = 'http://11.11.154.117:7001'

export default defineComponent({
  name: 'Icon',
  props: {
    src: {
      required: true,
      type: String
    },
    isMxdir: {
      type: Boolean,
      default: false
    },
    isWatch: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const IconNode = ref()
    const icon = computed(() => props.src)
    const isMxDesignDir = computed(() => props.isMxdir)

    const renderIcon = () => {
      if (icon.value === 'none' || !icon.value) {
        IconNode.value = null
      } else {
        if (icon.value.indexOf('base64') !== -1) {
          IconNode.value = h('i', { class: 'anticon', key: icon.value }, [
            h('img', {
              src: icon.value,
              style: 'width: 1em;height: 1em;vertical-align: initial;',
              onerror: () => {
                IconNode.value = h('i', { class: 'anticon' }, [
                  h(mxLoadFail, {
                    style: 'width: 1em;height: 1em;'
                  })
                ])
              }
            })
          ])
        } else if (icon.value.indexOf('self-') === 0) {
          try {
            const svgModule = isMxDesignDir.value
              ? mxModule[`../../assets/icons/${icon.value.replace('self-', '')}.svg`]
              : module[`../../../src/assets/icons/${icon.value.replace('self-', '')}.svg`]
            svgModule().then(mod => {
              IconNode.value = h('i', { class: 'anticon', key: icon.value }, [
                h(mod.default, {
                  style: 'width: 1em;height: 1em;'
                })
              ])
            })
          } catch (error) {
            IconNode.value = h('i', { class: 'anticon' }, [
              h(mxLoadFail, {
                style: 'width: 1em;height: 1em;'
              })
            ])
          }
        } else if (icon.value.indexOf(`${iconPath}/udp-icon`) === 0) {
          IconNode.value = h('i', { class: 'anticon', key: icon.value }, [
            h('img', {
              style: 'width: 1em;height: 1em;',
              src: icon.value.slice(iconPath.length),
              onload: (e: Event) => {
                SVGInjectInstance(e.target, {
                  copyAttributes: false
                })
              },
              onerror: () => {
                IconNode.value = h('i', { class: 'anticon' }, [
                  h(mxLoadFail, {
                    style: 'width: 1em;height: 1em;'
                  })
                ])
              }
            })
          ])
        } else if (/^(epai-|fa-rwp-)([\w.]+\/?)\S*/.test(icon.value)) {
          IconNode.value = h('i', { class: 'anticon', key: icon.value }, [
            h('img', {
              style: 'width: 1em;height: 1em;fill: currentColor;',
              src: `/rfIcons/npmIcons/${icon.value}.svg`,
              onload: (e: Event) => {
                SVGInjectInstance(e.target)
              },
              onerror: () => {
                IconNode.value = h('i', { class: 'anticon' }, [
                  h(mxLoadFail, {
                    style: 'width: 1em;height: 1em;'
                  })
                ])
              }
            })
          ])
        } else if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(icon.value)) {
          IconNode.value = h('i', { class: 'anticon', key: icon.value }, [
            h('img', {
              style: 'width: 1em;height: 1em;fill: currentColor;',
              src: icon.value,
              onerror: () => {
                IconNode.value = h('i', { class: 'anticon' }, [
                  h(mxLoadFail, {
                    style: 'width: 1em;height: 1em;'
                  })
                ])
              }
            })
          ])
        } else {
          const isSvg = icon.value.endsWith('.svg')
          IconNode.value = h('i', { class: 'anticon', key: icon.value }, [
            h('img', {
              style: `width: 1em;height: 1em;${isSvg ? 'fill: currentColor;' : 'vertical-align: initial;'}`,
              src: icon.value,
              onload: (e: Event) => {
                if (isSvg) {
                  SVGInjectInstance(e.target)
                }
              },
              onerror: () => {
                IconNode.value = h('i', { class: 'anticon' }, [
                  h(mxLoadFail, {
                    style: 'width: 1em;height: 1em;'
                  })
                ])
              }
            })
          ])
        }
      }
    }

    if (props.isWatch) {
      watch(icon, renderIcon, { immediate: true })
    } else {
      renderIcon()
    }
    return {
      IconNode
    }
  },
  render() {
    return this.IconNode
  }
})
